<template>
	<view :style="{ '--color': color }">
		<status-bar title="团队管理"></status-bar>
		<view class="Info" v-if="myInfo">
			<view class="User">
				<view class="userBox">
					<image
						:src="$imgUrls(myInfo.headimg)"
						mode="aspectFill"
						class="userImg"></image>
					<view class="Lvs">{{ myInfo.upLevelInfo.thisLevelTitle }}</view>
				</view>
				<view class="infoText">
					<text class="size30">{{ myInfo.name }}</text>
					<text class="size30 m-top10">{{ myInfo.tel }}</text>
				</view>
			</view>
		</view>

		<view class="LvBox" v-if="myInfo">
			<text class="LvTitle">团队等级</text>
			<view class="LvWrapper">
				<text class="lv_name">{{ myInfo.upLevelInfo.thisLevelTitle }}</text>
				<view class="content">
					<text class="Txt">{{ myInfo.upLevelInfo.text }}</text>
					<view class="line">
						<u-line-progress
							:percentage="myInfo.upLevelInfo.proportion"
							height="9"
							activeColor="#ffcc00"></u-line-progress>
					</view>
				</view>
				<text class="currentLv">{{ myInfo.upLevelInfo.nextLevelTitle }}</text>
			</view>
		</view>

		<view class="Income">
			<view class="d-flex f-column" @click="toUrl('/moneyPage/capital/brokerage_list')">
				<text class="color_333 size28">我的收益（元）</text>
				<text class="color_333 size50">{{ myInfo.income }}</text>
			</view>
			<view class="d-flex a-center" @click="toUrl('/moneyPage/capital/withdraws')">
				<text class="color size26">去提现</text>
				<view class="iconfont icon-a-zujian32 h7 color p-left4"></view>
			</view>
		</view>

		<view class="BoxItem" v-if="myInfo">
			<view class="list" @click="toUrl('/Releases/groupPer')">
				<text class="title"> 团队业绩（元）</text>
				<text class="Num">{{ myInfo.teamInfo.all_order_money }}</text>
				<view class="d-flex f-column m-top30">
					<text class="title">A区：{{ myInfo.teamInfo.orderMoneyA }}</text>
					<text class="title">B区：{{ myInfo.teamInfo.orderMoneyB }}</text>
				</view>
			</view>
			<view class="list" @click="toUrl('/Releases/groupMem')">
				<text class="title"> 团队成员（位）</text>
				<text class="Num">{{ myInfo.teamInfo.team_order_num }}</text>
				<view class="d-flex f-column m-top30">
					<text class="title">A区：{{ myInfo.teamInfo.orderNumA }}</text>
					<text class="title">B区：{{ myInfo.teamInfo.orderNumB }}</text>
				</view>
			</view>
			<view
				class="list"
				@click="toUrl(`/Releases/shop?store_id=${myInfo.storeAgent.store_id}`)"
				v-if="myInfo.storeAgent.agent_id >= 1">
				<text class="title"> 门店业绩（元）</text>
				<text class="Num">{{ myInfo.storeAgent.income }}</text>
				<view class="d-flex f-column m-top30">
					<text class="title">单量：{{ myInfo.storeAgent.orderNum }}</text>
					<text class="title"> 收益：{{ myInfo.storeAgent.orderMoney }}</text>
				</view>
			</view>
			<view
				class="list"
				@click="toUrl('/joinPage/proxyStore')"
				v-if="myInfo.serviceAgent.agent_id >= 1">
				<text class="title"> 服务商业绩（元）</text>
				<text class="Num">{{ myInfo.serviceAgent.income }}</text>
				<view class="d-flex f-column m-top30">
					<text class="title">单量：{{ myInfo.serviceAgent.orderNum }}</text>
					<text class="title"> 收益：{{ myInfo.serviceAgent.orderMoney }}</text>
				</view>
			</view>
		</view>

		<view class="BoxItem" v-if="myInfo">
			<view
				class="list"
				@click="toUrl(`/joinPage/addStore?store_id?${myInfo.storeAgent.store_id}`)"
				v-if="myInfo.storeAgent.state == 1 && myInfo.storeAgent.agent_id == 0">
				<text class="title"> 门店业绩（元）</text>
				<view class="toTitle color">申请入驻</view>
			</view>
			<view
				class="list"
				@click="toUrl(`/Releases/serverApply`)"
				v-if="myInfo.serviceAgent.state == 1 && myInfo.serviceAgent.agent_id == 0">
				<text class="title"> 服务商业绩（元）</text>
				<view class="toTitle color">申请入驻</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import Api from '@/common/Api.js';
	export default {
		data() {
			return {
				img: 'https://msraimgcdn.mogoie.com/6137/1731484174751.jpg',
				show: false,
				id: '',
				name: '全部',

				pageData: [],
				myInfo: '',
			};
		},
		onLoad() {
			this.getConfig();
		},
		methods: {
			async getConfig() {
				const result = await Api.getConfig();
				this.myInfo = result;
			},
		},
		computed: {
			...mapState(['color']),
			teamMoney() {
				if (!this.myInfo) return;
				return (
					Number(this.myInfo.teamInfo.my_order_money) +
					Number(this.myInfo.teamInfo.team_order_money)
				).toFixed(2);
			},
		},
	};
</script>
<style>
	page {
		background-color: #f2f2f2;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.BoxItem {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.list {
			width: 336rpx;
			height: 280rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-top: 24rpx;
			display: flex;
			flex-direction: column;
			.title {
				color: #333;
				font-size: 28rpx;
			}
			.Num {
				color: #333;
				font-size: 50rpx;
			}
			.toTitle {
				width: 100%;
				text-align: center;
				line-height: 200rpx;
				font-size: 36rpx;
			}
		}
	}
	.Income {
		width: 690rpx;
		background-color: #fff;
		padding: 30rpx 24rpx;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.LvBox {
		width: 690rpx;
		padding: 20rpx;
		background-color: #fff;
		margin: 26rpx auto 0;
		border-radius: 10rpx;
		.LvTitle {
			color: #333;
			font-size: 30rpx;
		}
		.LvWrapper {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			.lv_name {
				color: #000;
				font-size: 28rpx;
				font-weight: 500;
			}
			.content {
				flex: 1;
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.Txt {
					color: #b7655a;
					font-size: 26rpx;
				}
				.line {
					width: 100%;
					margin-top: 10rpx;
				}
			}
			.currentLv {
				color: #333;
				font-size: 32rpx;
			}
		}
	}
	.Info {
		width: 100%;
		background-color: #000066;
		padding: 40rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.User {
			width: 100%;
			display: flex;
			align-items: center;

			.infoText {
				display: flex;
				flex-direction: column;
				color: #fff;
				font-size: 30rpx;
			}
		}
		.Datas {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 26rpx;
			.tex {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.userBox {
		width: 150rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		position: relative;
		.userImg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.Lvs {
			max-width: 100%;
			background-color: #ff9900;
			color: #fff;
			font-size: 22rpx;
			padding: 2rpx 10rpx;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			white-space: nowrap;
		}
	}
</style>
